<template>
  <div class="hello" >
    <span v-bind:title="message" v-if="seen">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
    <button @click="increment" :class = "{'active': isActive,'btn':isActive}">点击</button>
    {{count}} + {{addnum}} = {{addR}}
    <div v-for="item in todos" :key="item.index">
      {{item.text}}
    </div>
    <input type="text" v-model.lazy = "message"  >
  
    <div  v-html="rawHtml" ></div> 
    <!-- 阻止事件继续传播 -->
    <a @click.stop = 'doThis'>阻止事件继续传播</a>
    <transition>
      <button v-bind:key="isEditing">
        {{ isEditing ? 'Save' : 'Edit' }}
      </button> 
    </transition>
    <!-- <button @click="show = !show">
      Toggle
    </button>
    <transition
      v-on:before-enter="beforeEnter"
      v-on:enter="enter"
      v-on:leave="leave"
      v-bind:css="false"
    >
      <p v-if="show">
        Demo
      </p>
    </transition> -->

    
        <!-- 子组件 -->
        <h3>子组件</h3>
        <vuedemo msg="sde" ></vuedemo>  
        <!-- 定义一个点击的方法监听子组件的状态-->
        <btnC :name="count" @pTc = "pTcFn($event)"></btnC>   
  </div>
</template>

<script>
import Vuedemo from "../components/HelloWorld";
import btnC from "../components/btn";
export default {
  name: "vuex",
  components: {
    Vuedemo,
    btnC
  },
  data() {
    return {
      message: "页面加载于 " + new Date().toLocaleString(),
      isEditing: false,
      msg: 2,
      addnum: 2,
      count: 0,
      isActive: true,
      seen: false,
      show: false,
      message: "hello",
      todos: [
        { text: "学习 JavaScript" },
        { text: "学习 Vue" },
        { text: "整个牛项目" }
      ],
      rawHtml: "<span style='color:red'>html结构</span>"
    };
  },
  // 生命周期钩子的 this 上下文指向调用它的 Vue 实例。
  beforeCreate: function() {
    console.log(1, this);
  },
  // 一个实例被创建之后执行
  created: function() {
    console.log(2, this);
  },
  beforeMount: function() {
    console.log(3, this);
  },
  mounted: function() {
    console.log(4, this);
  },
  beforeUpdate: function() {
    console.log(5, this);
  },
  updated: function() {
    console.log(6, this);
  },
  beforeDestroy: function() {
    console.log(7, this);
  },
  destroyed: function() {
    console.log(8, this);
  },
  // 计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。
  // 只要 count 还没有发生改变，多次访问 addR计算属性会立即返回之前的计算结果，而不必再次执行函数
  computed: {
    addR: function() {
      return this.addnum + this.count;
    }
  },
  watch: {},
  methods: {
    increment() {
      this.count++;
    },
    doThis: function() {},
    pTcFn: function(data) {
      // data就是子组件传过来的值
      console.log(data);
    },
    beforeEnter: function(el) {
      el.style.opacity = 0;
      el.style.transformOrigin = "left";
    },
    enter: function(el, done) {
      Velocity(el, { opacity: 1, fontSize: "1.4em" }, { duration: 300 });
      Velocity(el, { fontSize: "1em" }, { complete: done });
    },
    leave: function(el, done) {
      Velocity(el, { translateX: "15px", rotateZ: "50deg" }, { duration: 600 });
      Velocity(el, { rotateZ: "100deg" }, { loop: 2 });
      Velocity(
        el,
        {
          rotateZ: "45deg",
          translateY: "30px",
          translateX: "30px",
          opacity: 0
        },
        { complete: done }
      );
    }
  }
};
</script>

<style scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
